<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>div+css页面布局</title>
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
				background-color: white;
			}
			
			#container {
				/*
				 * 清楚最外层float属性
				 */
				clear: both;
				/*固定宽度值，防止浏览器窗口随着*/
				width: 800px;
				margin-left: auto;
				margin-right: auto;
			}
			
			#header {
				width: 100%;
				height: 60px;
				background-color: beige;
				background-image: url(002 (12).jpg);
			}
			
			#center {
				width: 100%;
				height: 400px;
			}
			
			#footer {
				width: 100%;
				height: 60px;
				background-color: brown;
			}
			
			#cleft {
				width: 20%;
				height: 100%;
				float: left;
				background-color: aqua;
			}
			
			#cright {
				width: 80%;
				height: 100%;
				float: right;
				background-color: white;
			}
			
			.crows {
				width: 100%;
				clear: both;
				text-align: center;
				shape-image-threshold: 82px;
			}
			
			.crImg {
				float: left;
				width: 20%;
				margin: 10px;
			}
			
			.crImg img {
				width: 80px;
				height: 80px;
			}
			
			.crContent {
				float: left;
				width: 30%;
			}
			
			.crPrice {
				float: left;
				width: 20%;
				margin: 10px;
				padding: 25px;
			}
			
			.crPrice strong {
				color: #F40;
				font-weight: 700;
				font-family: verdana, arial;
			}
		</style>
	</head>

	<body>
		<!-------总范围 container--------->
		<div id="container">
			<!-----------header--------------------->
			<div id="header">
				header
			</div>
			<!-----------center--------------------->
			<div id="center">
				<!--center:left-->
				<div id="cleft">
					left
				</div>
				<!--center:right-->
				<div id="cright">
					<!--每一行-->
					<div id="crow" class="crows">
						<div id="rowImg" class="crImg">
							<img src="180-400.jpg.jpg" />
						</div>
						<div id="rowImgConten" class="crContent">
							<p class="pconten">雅邦清新淡彩护唇膏润唇裸色保湿多彩 唇彩 口红滋润2.2g彩妆正品</p>
						</div>
						<div id="crPrice" class="crPrice">
							<strong>&yen;99.00</strong>
						</div>
					</div>
					<!--每一行-->
					<div id="crow" class="crows">
						<div id="rowImg" class="crImg">
							<img src="TB1Fm.aLXXXXXabaXXXXXXXXXXX_!!0-item_pic.jpg_180x180.jpg_.webp" />
						</div>
						<div id="rowImgConten" class="crContent">
							<p class="pconten">国外正宗进口fly cup</p>
						</div>
						<div id="crPrice" class="crPrice">
							<strong>&yen;138.00</strong>
						</div>
					</div>
					</div>
					<!--------------footer------------------>
					<div id="footer">
						footer
					</div>
					<!-------------------------------->
					<!-------------------------------->
					<!-------------------------------->

				</div>

	</body>

</html>